<script>
export default {
  name: "swiperVideo"
}
</script>
<script setup>
import { defineEmits, ref } from "vue"
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination, Autoplay } from "swiper";
const activeCarouseIndex = ref(0);

const swiperVideoRef = ref();

const carouselVideoList = [
  {
    src: "./static/video/video1.mp4",
    index: 0,
    img: new URL("@/assets/video/1.png", import.meta.url).href,
  },
  {
    src: "./static/video/video2.mp4",
    index: 1,
    img: new URL("@/assets/video/2.png", import.meta.url).href,
  },
  {
    src: "./static/video/video3.mp4",
    index: 2,
    img: new URL("@/assets/video/3.png", import.meta.url).href,
  },
]

const selectMonitorItem = (obj) => {
  activeCarouseIndex.value = obj.realIndex;
}
const onSwiper = (swiper) => {
  swiperVideoRef.value = swiper;
}

const carouseItemClick = (index) => {
  if (swiperVideoRef.value) {
    swiperVideoRef.value.slideTo(index + 1);
  }
}
</script>

<template>
  <div class="box">
    <div class="swiperBox">
      <Swiper ref="swiperVideoRef" trigger="click" :loop="true" :modules="[Navigation, Pagination, Autoplay]" pagination
        @slideChange="selectMonitorItem" @swiper="onSwiper" class="swiper-container" :space-between="30" :autoplay="{
          delay: 2500,  // 轮播间隔(ms)
          disableOnInteraction: false,  // 用户操作后不停止
          pauseOnMouseEnter: true,      // 鼠标悬停时暂停（可选）
          enable: true                  // 显式启用自动播放
        }">
        <SwiperSlide v-for="obj in carouselVideoList" :key="obj.index">
          <video :src="obj.src" controls style="width:100%;height: 100%;" autoplay></video>
        </SwiperSlide>
      </Swiper>
    </div>
    <div class="carouseItems">
      <el-scrollbar height="100%" style="width: 100%">
        <div class="carouseItemBox">
          <div class="carouseItem" :class="[{ activeCarouseIndex: item.index === activeCarouseIndex }]"
            v-for="item in carouselVideoList" :key="item.index" @click="carouseItemClick(item.index)">
            <el-image style="width:100%;height: 100%;" :src="item.img" :z-index="999999" :zoom-rate="1.2" :max-scale="7"
              :min-scale="0.2" fit="cover" />
          </div>
        </div>

      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped lang="less">
.box {
  height: calc(100% - 46px);
  width: 100%;

  >.swiperBox {
    width: 100%;
    height: calc(100% - 110px);

    :deep(.swiper-container) {
      height: 100%;
    }
  }

  >.carouseItems {
    height: 110px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;

    .carouseItemBox {
      height: 110px;
      display: flex;
      padding: 6px 2px 6px 2px;
      justify-content: flex-start;

      >.carouseItem {
        width: 30%;
        height: 100%;
        flex-shrink: 0;
        margin-left: 2px;
        margin-right: 2px;
        cursor: pointer;
        border: 1px solid transparent;
      }

      >.carouseItem.activeCarouseIndex {
        border: 4px solid rgba(0, 133, 254, 1);
      }
    }

  }
}
</style>